"use client"

import { useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, Home, RotateCcw } from "lucide-react"
import { useUser } from "@/lib/user-context"
import { useToast } from "@/components/ui/use-toast"

export default function ResultPage() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const { user } = useUser()
  const { toast } = useToast()

  const type = searchParams.get("type")
  const score = searchParams.get("score")
  const total = searchParams.get("total")
  const answeredCount = searchParams.get("answeredCount")

  // 如果用户未登录，重定向到首页
  useEffect(() => {
    if (!user) {
      toast({
        title: "请先登录",
        description: "您需要登录后才能查看结果",
        variant: "destructive",
      })
      router.push("/")
    }
  }, [user, router, toast])

  // 获取练习类型的中文名称
  const getTypeName = () => {
    switch (type) {
      case "vocabulary-grammar":
        return "词汇与语法"
      case "dialogue-cloze":
        return "情景对话与完形填空"
      case "reading":
        return "阅读理解"
      case "writing":
        return "写作练习"
      default:
        return "练习"
    }
  }

  // 获取成绩评价
  const getEvaluation = () => {
    if (!score || !total) return ""

    const percentage = (Number.parseInt(score) / Number.parseInt(total)) * 100

    if (percentage >= 90) return "优秀！"
    if (percentage >= 80) return "良好！"
    if (percentage >= 70) return "不错！"
    if (percentage >= 60) return "及格！"
    return "需要继续努力！"
  }

  // 返回首页
  const goHome = () => {
    router.push("/")
  }

  // 重新练习
  const retryPractice = () => {
    router.push(`/practice/${type}`)
  }

  if (!user) {
    return null
  }

  return (
    <div className="container mx-auto px-4 py-12">
      <Card className="max-w-md mx-auto">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
            <CheckCircle className="h-8 w-8 text-primary" />
          </div>
          <CardTitle className="text-2xl">{getTypeName()}完成！</CardTitle>
        </CardHeader>
        <CardContent className="text-center space-y-4">
          {type === "writing" ? (
            <p>
              您已完成 {answeredCount} / {total} 道写作题目
            </p>
          ) : (
            <>
              <p className="text-4xl font-bold">
                {score} / {total}
              </p>
              <p>{getEvaluation()}</p>
            </>
          )}

          <p className="text-muted-foreground">
            {type !== "writing" ? "您可以在错题本中查看您的错题，以便复习。" : "您可以在写作练习页面查看您的答案。"}
          </p>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={goHome}>
            <Home className="mr-2 h-4 w-4" />
            返回首页
          </Button>
          <Button onClick={retryPractice}>
            <RotateCcw className="mr-2 h-4 w-4" />
            重新练习
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

